import React from "react";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import "../style/style.less";
import ThePagination from "../../../components/ThePagination";
import TheImage from '@/components/TheImage';
import {Modal} from "antd"

class SyncInventory extends React.Component {
    state = {
        down_loading: false,
        columns: [
            {
                title: "商品名称",
                dataIndex: "goodsName",
                key: "goodsName",
            },
            {
                title: "商品规格",
                dataIndex: "skuAttributes",
                key: "skuAttributes",
                render:(text,record)=>{
                    return record.skuAttributes.map(item =>{
                        return item.goodsKeyName +"：" + item.goodsValue
                    }).join('，')
                }
            },
            {
                title: "商品Id",
                dataIndex: "goodsId",
                key: "goodsId",
            },
            {
                title: "商品SKUID",
                dataIndex: "goodsSkuId",
                key: "goodsSkuId",
            },
            {
                title: "物料ID",
                dataIndex: "materialId",
                key: "materialId",
            },
            {
                title: "匹配状态",
                dataIndex: "matchStatus",
                key: "matchStatus",
                render: (text, record) => {
                    let label = ''
                    switch (record.matchStatus) {
                        case '0':
                        label = "未匹配"
                        break;
                        case '1':
                        label = "已匹配"
                        break;
                        default:
                        label = "字段值错误"
                    }
                    return label
                }
            },
            {
                title: "仓库库存",
                dataIndex: "skuStock",
                key: "skuStock",
            },
            {
                title: "金蝶库存",
                dataIndex: "kingdeeStock",
                key: "kingdeeStock",
                render:(text, record)=>{
                    return record.kingdeeStock === null ? "" :record.kingdeeStock
                }
            },
            {
                title: "商品规格图片",
                dataIndex: "goodsShowImages",
                key: "goodsShowImages",
                render: (text, record) => {
                    return <TheImage src={record.goodsImage} width={80} height={80} />
                }
            },

            {
                title: "操作",
                fixed: "right",
                width: 100,
                render: (text, record) => {
                    return (
                        record.matchStatus === '0'? <div>

                    </div>:
                        <div>
                            <TheButton
                                hasPermi={['mall:syncInventory:sync']}
                                onClick={() => {
                                    this.synchronized( record.stockSyncTempId)
                                }}
                             >同步</TheButton>
                        </div>
                    );
                },
            },
        ],
        dataSource: [],
        pageData: {
            pageNo: 1,
            pageSize: 10,
        },
        total: 0,
        searchValue: {},
        loading: false,

    };
    componentDidMount(){
        if(localStorage.getItem('pageNo')){
            this.setState({
                pageData:{
                    pageNo:localStorage.getItem('pageNo'),
                    pageSize:localStorage.getItem('pageSize')
                }
            },()=>{
                this.getData()
            })
        }else{
            this.getData()
        }
    }
    getData = async ()=>{
        this.setState({loading:true})
        const { pageData } = this.state
        let res = await React.$post('/management/stockSyncTemp/page',{...pageData})
        if(res.code === 0 ){
            res.data[0]?this.setState({
                dataSource: res.data,
                pageData: { pageNo: res.pageNo, pageSize: res.pageSize },
                total: res.totalCount,
                loading: false,
                time:res.data[0].createTime
            }):this.setState({
                dataSource: res.data,
                pageData: { pageNo: res.pageNo, pageSize: res.pageSize },
                total: res.totalCount,
                loading: false,
                time:''
            })
        }else{
            this.setState({
                dataSource: res.data,
                pageData: { pageNo: res.pageNo, pageSize: res.pageSize },
                total: res.totalCount,
                loading: false,
                time:''
            })
        }
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo,
                pageSize
            }
        }, () => {
            localStorage.setItem('pageNo',this.state.pageData.pageNo);
            localStorage.setItem('pageSize',this.state.pageData.pageSize);
            this.getData()
        })
    };
    //同步金蝶库存 SynchronizeAll
    synchronized = async (stockSyncTempId) => {
        this.setState({
            loading:true
        })
        let params = {
            stockSyncTempId: stockSyncTempId,
        }
        Modal.confirm({
            title: '提示',
            content: '是否确认同步？',
            onOk: async () => {
                let res = await React.$post('/management/stockSyncTemp/updateInventory', params)
                if (res.code === 0) {
                    React.$message({
                        type: "success",
                        content: '同步成功!'
                    })
                    this.getData()
                }
            },
            onCancel: ()=> {
                this.setState({
                    loading:false
                })
            },
        });

    }
    //生成
    synchronizedSelect = async () => {
        this.setState({
            loading:true
        })
        Modal.confirm({
            title: '提示',
            content: '是否确认生成同步数据？',
            onOk: async () => {
                let res = await React.$post('/management/stockSyncTemp/generate')
                if (res.code === 0) {
                    React.$message({
                        type: "success",
                        content: '同步数据生成成功!'
                    })
                    this.getData()
                }
            },
            onCancel: ()=> {
                this.setState({
                    loading:false
                })
            },
        });

    }
    //同步全部
    synchronizedAll = async () => {
        this.setState({
            loading:true
        })
        Modal.confirm({
            title: '提示',
            content: '数据较多同步时间较长，是否确认全部同步？',
            onOk: async () => {
                let res = await React.$post('/management/stockSyncTemp/updateAllInventory')
                if (res.code === 0) {
                    React.$message({
                        type: "success",
                        content: '同步请求已发送，请耐心等待数据同步!'
                    })
                    this.getData()
                }
            },
            onCancel: ()=> {
                this.setState({
                    loading:false
                })
            },
        });
    }

    getRowClassName(record, index) {
        if (typeof record !== 'object') return
        let status = record.matchStatus
        return status === '0' ? "warning" : ''
        // let flag = record.orderDetailList.filter(item => !['4', '0', null].includes(item.salesStatus))
        // return flag.length > 0 ? "warning" : ''哼好看我听过那个那个好像说是各种搁网上谁简单的
    }

    render() {
        const {
            columns,
            dataSource,
            pageData: { pageNo, pageSize },
            total,
            loading,
            time
        } = this.state;
        return (
            <div className={"p-layout-box commodity-content"}>
                <div>上次拉取时间：{time}</div>
                <div className="synchronizedAll">
                    <TheButton  type="default" size ='middle' hasPermi={['mall:syncInventory:generate']} onClick = {this.synchronizedSelect}  >拉取金蝶库存</TheButton>
                    <TheButton type="default" size ='middle' hasPermi={['mall:syncInventory:allSync']} onClick = {this.synchronizedAll}  >全部同步</TheButton>
                </div>
                <div className="p-layout-content-pagination">
                    <TheTable
                        scroll={{ x: "max-content", y: '63vh' }}
                        columns={columns}
                        dataSource={dataSource}
                        loading={loading}
                        rowClassName = {this.getRowClassName}
                    />
                    <ThePagination
                        pageNo={pageNo}
                        pageSize={pageSize}
                        total={total}
                        pageChange={this.pageChange}
                    />
                </div>

            </div>
        );
    }
}

export default SyncInventory;
